<template>
	<view class="box">
		<u-navbar :fixed="false" :placeholder="true" title="试卷查看" @leftClick="leftClick" bgColor="#0F53AC"
			leftIconColor="#fff" >
		</u-navbar>
		<view class="main-box">
			<view class="info-title">
				{{dataForm.examName}}
			</view>
			<view class="info-content">考试时间：{{dataForm.examStartTime}}至{{dataForm.examEndTime}}</view>
			<view class="info-content">及格分数：{{dataForm.passMark}}分（满分{{dataForm.totalMark}}分）</view>
			<view class="info-content">题目数量：{{dataForm.subjectNum}}题</view>
			<view class="info-content">交卷时间：{{dataForm.endTime}}</view>
			<!-- <view class="info-content">考试用时：{{formatDuring(dataForm.useSeconds * 1000)}}</view> -->
			<view class="line1 mar"></view>
			<view class="bottom-mine" v-if="dataForm.trainName">
				<view class="bottom-content">关联培训：</view>
				<view class="bottom-content bottom-box">
					<image class="box-img" src="../../../static/images/index/peixun.png" mode=""></image>
					<view class="box-text">
						<view class="main-text">{{dataForm.trainName}}</view>
						<view class="tag">
							<view class="bottom-tags">
								<!-- {{(dataForm.categoryName&&dataForm.categoryName.length > 5) ? dataForm.categoryName.substr(0,5) + '...' :dataForm.categoryName}} -->
								{{dataForm.categoryName}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="mark">
			<view class="examJG">
				考试结果
			</view>
			<view class="mark-top">
				<!-- :style="{background:dataForm.passStatus == 1?'rgba(40, 184, 105, 0.1)':'rgba(255, 77, 77, 0.1)'}" -->
				<view class="small-box">
					<view class="df">
						<view class="small-title" :class="dataForm.passStatus == 1? 'pass-color' : 'fail-color'">
							{{dataForm.passStatus == 1? '及格':'不及格'}}
						</view>
					</view>
					<view class="small-exam">
						<span class="exam-type"
							:class="dataForm.passStatus == 1?'exam-type-pass':'exam-type-fail'">{{dataForm.score}}</span>/{{dataForm.totalMark}}
					</view>
				</view>
				<view class="small-box">
					<view class="df">
						<view class="small-title2">正确率</view>
					</view>
					<view class="small-percent">{{dataForm.rightRate}}</view>
				</view>
			</view>
			<view class="mark-bottom">
				<view class="bottom-box">
					<view>总题数</view>
					<view class="num1">{{dataForm.subjectNum}}</view>
				</view>
				<view class="bottom-box">
					<view>答对</view>
					<view class="num2">{{dataForm.rightNum}}</view>
				</view>
				<view class="bottom-box">
					<view>答错</view>
					<view class="num3">{{dataForm.wrongNum}}</view>
				</view>
			</view>
			<view class="line1" style="margin-top: 32rpx;"></view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-subside"></view>
		<view class="kiss-bottom-double" v-if="dataForm.againFlag==1">
			<view class="btn-left" @click="$dianji(sumbit,'onoff1')">再考一次</view>
			<view class="btn-right" @click="$dianji(seePaper,'onoff2')">查看试卷</view>
		</view>
		<view class="kiss-bottom-once" v-else>
			<view class="btn-right" @click="$dianji(seePaper,'onoff2')">查看试卷</view>
		</view>
		<u-modal :show="modelShow" title="提示" :content='modelContent' cancelText="取消" :showCancelButton="true"
			confirmColor="#0F53AC" @confirm="modelConfirm()" @cancel="modelCancel()"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				onoff1: true,
				onoff2: true,
				// 业务id
				trainId: '',
				// 试卷id
				examPaperId: '',
				// 用户id
				userId: '',
				dataForm: {},
				modelShow: false,
				modelContent: '确定再考一次吗?当前考试成绩将清空',
				examTime: 0,
				time: '',
				formType: 'kaoshi',
				examFinish: 0
			}
		},
		onLoad(options) {
			this.trainId = options.trainId
			this.examPaperId = options.examPaperId
			if (options.formType) {
				this.formType = options.formType
			}
			if (options.examFinish) {
				this.examFinish = options.examFinish
			}
			this.userId = uni.getStorageSync('userInfo').userId
			this.initData()
		},
		// onUnload() {
		// 	this.leftClick()
		// },
		methods: {
			leftClick() {
				if (this.formType == 'peixun') {
					uni.navigateBack({
						delta: 1
					})
				} else if (this.formType == 'peixun2') {
					uni.reLaunch({
						url: `/pages/subPackagesC/mineTrain/trainInfo?id=${this.dataForm.trainId}&trainState=${2}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/subPackagesC/exam/index'
					})
				}

			},
			initData() {
				const params = {
					trainId: this.trainId,
					examPaperId: this.examPaperId,
					userId: this.userId,
				}
				uni.$u.http.post(`/train/mobile/exam/getExamResult`, params).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
						this.time = this.dataForm.examTime
					}
				}).catch(err => {})
			},
			formatDuring(mss) {
				var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = (mss % (1000 * 60)) / 1000;
				return hours + "时" + minutes + "分" + seconds + '秒';
			},
			seePaper() {
				uni.navigateTo({
					url: `/pages/subPackagesC/exam/seePaper?trainId=${this.trainId}&examPaperId=${this.examPaperId}`
				})
			},
			sumbit() {
				this.modelShow = true
			},
			modelCancel() {
				this.modelShow = false
			},
			modelConfirm() {
				let data = {
					trainId: this.trainId,
					examPaperId: this.examPaperId
				}

				uni.$u.http.post(`/train/mobile/exam/examAgain`, data).then(res => {
					if (res.code == 0) {
						this.modelShow = false
						uni.navigateTo({
							url: `/pages/subPackagesC/exam/examStart?examPaperId=${this.examPaperId}&examTime=${this.time}&trainId=${this.trainId}&alignExam=${1}&examFinish=${this.examFinish}`,
						})
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.box {
		.main-box {
			padding: 32rpx 48rpx;
			border-top: 1px solid #f2f2f2;
			background-color: #fff;
			border-radius: 12rpx;

			.info-title {
				font-size: 16px;
				font-weight: 500;
				color: #2B2B2B;
				margin: 0 0 10rpx;
			}

			.info-content {
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				margin-top: 16rpx;
			}

			.bottom-mine {
				// border-bottom: 1px solid #f5f5f5;
				font-size: 28rpx;
				// padding: 40rpx 32rpx;

				.bottom-content {
					font-size: 16px;
					font-weight: 500;
					color: #2B2B2B;

					.main-text {
						font-size: 16px;
						font-weight: 400;
						color: #333333;
						word-break: break-all;
						word-wrap: break-word;
					}
				}

				.bottom-box {
					color: #2b2b2b;
					display: flex;
					// align-items: center;
					margin-top: 32rpx;

					.box-img {
						width: 104rpx;
						height: 104rpx;
						margin-right: 16rpx;
						min-width: 104rpx;
					}

					.box-text {
						height: 104rpx;
						display: flex;
						flex-direction: column;

						.main-text {
							width: 500rpx;
							font-size: 16px;
							font-weight: 400;
							color: #333333;
							word-break: break-all;
							word-wrap: break-word;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.tag {
							display: flex;
							margin-top: 12rpx;

							.bottom-tags {
								text-align: center;
								color: rgba(102, 102, 102, 1);
								background: rgba(229, 229, 229, 1);
								font-size: 24rpx;
								line-height: 17.38px;
								// margin-top: 24rpx;
								// max-width: 120rpx;
								border-radius: 8rpx;
								padding: 8rpx 24rpx;
								overflow: hidden; //超出的文本隐藏
								text-overflow: ellipsis; //溢出用省略号显示
								white-space: nowrap; // 默认不换行；
							}
						}
					}

				}
			}
		}

		.mark {
			padding: 32rpx;
			background-color: #fff;
			// margin: 0 16rpx 16rpx 16rpx;
			border-bottom: 2prx solid #000;
			border-radius: 12rpx;

			.examJG {
				font-size: 16px;
				font-weight: 500;
				color: #2B2B2B;
				margin-bottom: 24rpx;
			}

			.mark-top {
				display: flex;
				justify-content: space-between;

				.small-box {
					width: 48%;
					height: 228rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 4px;
					background: rgba(245, 245, 245, 0.8);


					.small-title {
						width: 90rpx;
						text-align: center;
						font-size: 14px;
						font-weight: 400;
						padding: 8rpx 32rpx;
						border-radius: 4px 0px 7px 4px;
						color: #02AD82;
						background-color: rgba(2, 173, 130, 0.2);
					}

					.small-title2 {
						width: 90rpx;
						text-align: center;
						font-size: 14px;
						font-weight: 400;
						padding: 8rpx 32rpx;
						border-radius: 4px 0px 7px 4px;
						color: #0F53AC;
						background: rgba(15, 83, 172, 0.2);
					}

					.small-exam {
						font-size: 40rpx;
						color: #8C8C8C;
						margin: 30rpx 0 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.exam-type {
							font-size: 30px;
							font-weight: 700;
							margin-right: 14rpx;
						}

						.exam-type-pass {
							color: #28B869;
						}

						.exam-type-fail {
							color: #FA4016;
						}
					}

					.small-tags {
						width: 80rpx;
						border-radius: 4px;
						font-size: 12px;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 2px 12px;

					}

					.pass-color {
						background: rgba(2, 173, 130, 0.2);
						color: rgba(2, 173, 130, 1);
					}

					.fail-color {
						background: rgba(255, 77, 77, 0.2);
						color: rgba(255, 77, 77, 1);
					}

					.small-percent {
						margin: 30rpx 0 16rpx;
						font-size: 30px;
						color: rgba(15, 83, 172, 1);
						font-weight: 700;
					}
				}
			}

			.mark-bottom {
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
				color: #4D4D4D;
				padding-top: 32rpx;
				border-top: 2rpx solid #f5f5f5;

				.bottom-box {
					width: 33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #8C8C8C;

					.num1 {
						color: #2B2B2B;
						font-size: 16px;
						margin-top: 6rpx;
					}

					.num2 {
						color: rgba(2, 173, 130, 1);
						font-size: 16px;
						margin-top: 6rpx;
					}

					.num3 {
						color: rgba(255, 77, 77, 1);
						font-size: 16px;
						margin-top: 6rpx;
					}
				}

				.bottom-box:nth-child(2) {
					border-left: 1px solid #f5f5f5;
					border-right: 1px solid #f5f5f5;

				}
			}
		}
	}

	.mar {
		margin: 32rpx 0;
	}

	.df {
		width: 100%;
		text-align: left;
		margin-bottom: 8rpx;
	}
</style>
